<template>
  <div id="searchPicturePage" class="image-search-container">
    <!-- 页面标题 -->
    <div class="header-section">
      <h2 class="page-title">🔍 以图搜图</h2>
      <div class="title-divider"></div>
    </div>

    <!-- 原图展示 -->
    <section class="original-image-section">
      <h3 class="section-title">
        <span class="title-icon">🖼️</span>
        <span class="title-text">原图展示</span>
      </h3>
      <a-card
          class="image-card hover-effect"
          :body-style="{ padding: '8px' }"
      >
        <template #cover>
          <div class="image-wrapper">
            <a-image
                :src="picture.thumbnailUrl ?? picture.url"
                :alt="picture.name"
                :preview="false"
                class="preview-image"
                fallback="/image-placeholder.png"
            >
              <template #placeholder>
                <a-skeleton-image class="skeleton-placeholder" />
              </template>
            </a-image>
          </div>
        </template>
        <a-card-meta class="image-meta">
          <template #title>
            <div class="image-title">{{ picture.name || '未命名图片' }}</div>
          </template>
        </a-card-meta>
      </a-card>
    </section>

    <!-- 搜索结果 -->
    <section class="search-results-section">
      <div class="results-header">
        <h3 class="section-title">
          <span class="title-icon">🔍</span>
          <span class="title-text">识图结果</span>
        </h3>
        <div class="results-count">共找到 {{ dataList.length }} 个相关结果</div>
      </div>

      <!-- 加载状态 -->
      <a-spin :spinning="loading" tip="AI正在努力分析中...">
        <!-- 搜索结果列表 -->
        <a-list
            :grid="{
            gutter: 24,
            xs: 1,
            sm: 2,
            md: 3,
            lg: 4,
            xl: 4,
            xxl: 5
          }"
            :data-source="dataList"
            class="results-list"
        >
          <template #renderItem="{ item }">
            <a-list-item class="result-item">
              <a
                  :href="item.fromUrl"
                  target="_blank"
                  class="result-card hover-effect"
              >
                <a-card :body-style="{ padding: '8px' }">
                  <!-- 图片加载状态处理 -->
                  <div class="image-wrapper">
                    <a-image
                        :src="item.thumbUrl"
                        class="result-image"
                        :alt="item.fromUrl"
                        fallback="@/assets/image-error.svg"
                    >
                      <template #placeholder>
                        <a-skeleton-image class="skeleton-placeholder" />
                      </template>
                      <template #error>
                        <div class="image-error">
                          <span class="error-icon">⚠️</span>
                          <p class="error-text">图片加载失败</p>
                        </div>
                      </template>
                    </a-image>
                  </div>

                  <!-- 图片来源信息 -->
                  <a-card-meta class="image-meta">
                    <template #title>
                      <div class="source-url">
                        <link-outlined class="link-icon" />
                        {{ formatDomain(item.fromUrl) }}
                      </div>
                    </template>
                  </a-card-meta>
                </a-card>
              </a>
            </a-list-item>
          </template>
        </a-list>
      </a-spin>

      <!-- 回到顶部 -->
      <a-back-top :visibility-height="300" class="back-top-btn">
        <div class="back-top-content">
          <arrow-up-outlined class="arrow-icon" />
        </div>
      </a-back-top>
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getPictureVoByIdUsingGet,
  searchPictureByPictureUsingPost
} from '@/api/pictureController'
import {
  message,
  Spin as ASpin,
  Image as AImage,
  BackTop as ABackTop
} from 'ant-design-vue'
import {
  LinkOutlined,
  ArrowUpOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const loading = ref(false)

// 图片数据
const picture = ref<API.PictureVO>({})
const dataList = ref<API.ImageSearchResult[]>([])

// 获取图片ID
const pictureId = computed(() => route.query?.pictureId?.toString() || '')

// 获取原始图片信息
const getOldPicture = async () => {
  try {
    if (!pictureId.value) return

    const res = await getPictureVoByIdUsingGet({ id: pictureId.value })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
    }
  } catch (error) {
    message.error('获取原图信息失败')
  }
}

// 获取搜索结果
const fetchData = async () => {
  try {
    loading.value = true
    const res = await searchPictureByPictureUsingPost({
      pictureId: pictureId.value
    })

    if (res.data.code === 0) {
      dataList.value = res.data.data || []
    } else {
      message.error(res.data.message || '获取搜索结果失败')
    }
  } catch (error) {
    message.error('请求失败，请检查网络')
  } finally {
    loading.value = false
  }
}

// 格式化域名显示
const formatDomain = (url: string) => {
  try {
    return new URL(url).hostname.replace('www.', '')
  } catch {
    return url.slice(0, 30) + '...'
  }
}

// 初始化加载
onMounted(async () => {
  await Promise.all([getOldPicture(), fetchData()])
})
</script>

<style scoped lang="less">
@import "@/assets/theme.less";

.image-search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  .header-section {
    margin-bottom: 32px;

    .page-title {
      font-size: 28px;
      color: @primary-color;
      margin-bottom: 8px;
    }

    .title-divider {
      height: 2px;
      background: linear-gradient(90deg, @primary-color 0%, transparent 100%);
    }
  }

  .original-image-section {
    margin-bottom: 40px;

    .image-card {
      width: 100%;
      max-width: 400px;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ;

      .preview-image {
        width: 100%;
        height: 240px;
        object-fit: cover;
        border-radius: 8px;
      }

      .image-meta {
        padding: 12px 0 0;

        .image-title {
          font-weight: 500;
          .text-ellipsis();
        }
      }
    }
  }

  .search-results-section {
    .results-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;

      .results-count {
        margin-left: 16px;
        color: @text-color-secondary;
        font-size: 14px;
      }
    }

    .results-list {
      .result-item {
        padding: 0 12px;

        .result-card {
          display: block;
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s ;

          .result-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
          }

          .image-meta {
            padding: 12px 0 0;

            .source-url {
              .text-ellipsis();
              color: @primary-color;

              .link-icon {
                margin-right: 6px;
              }
            }
          }
        }
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    margin: 24px 0;

    .title-icon {
      margin-right: 12px;
    }

    .title-text {
      position: relative;
      padding-bottom: 4px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, @primary-color 0%, transparent 100%);
      }
    }
  }

  .hover-effect {
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
  }

  .image-wrapper {
    position: relative;
    background: #f0f2f5;
    border-radius: 8px;
    overflow: hidden;

    .skeleton-placeholder {
      width: 100%;
      height: 100%;
    }

    .image-error {
      .flex-center();
      flex-direction: column;
      height: 100%;
      color: @error-color;

      .error-icon {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .error-text {
        margin: 0;
        font-size: 12px;
      }
    }
  }

  .back-top-btn {
    right: 40px;
    bottom: 40px;

    .back-top-content {
      .flex-center();
      width: 40px;
      height: 40px;
      background: @primary-color;
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(@primary-color, 0.3);
      color: white;
      transition: all 0.3s;

      &:hover {
        transform: scale(1.1);
      }

      .arrow-icon {
        font-size: 18px;
      }
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    padding: 16px;

    .page-title {
      font-size: 24px !important;
    }

    .original-image-section {
      .image-card {
        max-width: 100% !important;
      }
    }

    .results-list {
      .result-image {
        height: 160px !important;
      }
    }
  }
}
</style>
